<!--Tab列表-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div class="w-h-full tabs-container"
         :style="{
           backgroundColor: component.compConfigData.backgroundColor
         }">
      <div class="tab-item"
           v-for="(tabItem, index) in runCustomFilter(component.compConfigData.ds_resultObj)"
           :key="index"
           :style="Object.assign({
             width: (100/component.compConfigData.colsNum) + '%',
             height: (100/component.compConfigData.rowsNum) + '%',
             backgroundColor: value.indexOf(tabItem.value) > -1 ? component.compConfigData.tabItemStyle.backgroundColorActive : component.compConfigData.tabItemStyle.backgroundColor,
             color: value.indexOf(tabItem.value) > -1 ? component.compConfigData.tabItemStyle.colorActive : component.compConfigData.tabItemStyle.color,
             borderWidth: component.compConfigData.tabItemStyle.borderWidth + 'px',
             borderStyle: component.compConfigData.tabItemStyle.borderStyle,
             borderColor: component.compConfigData.tabItemStyle.borderColor,
             borderRadius: component.compConfigData.tabItemStyle.borderRadius + 'px',
           }, tabItemHoverStyleObject)" @click.stop="tabItemClick(tabItem)">
        <span class="text"
              :style="{
                fontSize: component.compConfigData.tabItemStyle.fontSize + 'px'
              }">
          {{tabItem.label}}
        </span>
      </div>
    </div>

  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'TabListComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({

        rowsNum: 1, // 行数
        colsNum: 3, // 列数
        backgroundColor: '',
        selectType: 'radio', // 选择类型：radio单选，checkbox多选
        initValue: '1', // 初始化值
        useCarousel: false, //是否启用轮播
        carouselDuration: 2, // 轮播时间间隔，单位：秒

        tabItemStyle: {
          backgroundColor: '#616161',
          color: '#eeeeee',

          borderWidth: 1,
          borderStyle: 'solid',
          borderColor: '#424242',
          borderRadius: 0,

          fontSize: 12,

          backgroundColorHover: '#2196f3',
          colorActive: '#ffffff',
          backgroundColorActive: '#2196f3'
        },

        tabItemClickCode: ''

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'label',
            remark: '标签'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            "label": "Tab1",
            "value": '1'
          },
          {
            "label": "Tab2",
            "value": '2'
          },
          {
            "label": "Tab3",
            "value": '3'
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: false, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick',[
          PnDesigner.buildFuncCompInteractionFieldsMapItem('label', '', '标签'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
        ])
      ]))
    },
    data() {
      return {
        value: [],
        tabListCompTimer: null,
        carouselFlag: 0, // 轮询下标值
      }
    },
    destroyed () {
      // 清除定时器
      if(this.tabListCompTimer) {
        clearInterval(this.tabListCompTimer);
      }
    },
    mounted() {
      this.init();

      if (this.component.compConfigData.initValue) {
        this.value.push(this.component.compConfigData.initValue)
      }
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      tabItemClick (tabItem) {
        if (this.component.compConfigData.selectType == 'radio') {
          this.value = [];
          this.value.push(tabItem.value);
          this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', tabItem)
        }else {
          if (this.value.indexOf(tabItem.value) > -1) {
            let index = this.value.indexOf(tabItem.value);
            this.value.splice(index, 1)
          }else {
            this.value.push(tabItem.value)
          }
        }
        let value = this.value;
        eval(this.component.compConfigData.tabItemClickCode)
      },

      initTabListCompTimer () {
        if (this.component.compConfigData.selectType == 'radio') {
          if(this.$store.state.release.pageMetadata) {
            let ds_resultObj = this.component.compConfigData.ds_resultObj;
            this.tabListCompTimer = setInterval(() => {
              this.tabItemClick(ds_resultObj[this.carouselFlag]);
              this.carouselFlag += 1;
              if (this.carouselFlag == ds_resultObj.length) {
                this.carouselFlag = 0
              }
            }, this.component.compConfigData.carouselDuration * 1000)
          }
        }
      }
    },
    computed: {
      tabItemHoverStyleObject() {
        return {
          '--background-color-hover': this.component.compConfigData.tabItemStyle.backgroundColorHover
        }
      }
    },
    watch: {
      'component.compConfigData.useCarousel': {
        handler: function (val) {
          if (val) {
            this.initTabListCompTimer()
          }else {
            clearInterval(this.tabListCompTimer);
          }
        },
        immediate: true
      }
    }
  };

  export default _this
</script>

<style lang="less" scoped>

  .tabs-container {

    .tab-item {
      float: left;
      box-sizing: border-box;
      cursor: pointer;
      .text {
        width: 100%;
        height: 100%;
        /* 上下垂直居中 */
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
      }
      &:hover {
        background-color: var(--background-color-hover) !important;
      }
    }
  }

</style>
